<template>
  <div class="my-home">
    <div class="top">
      <div>
        <h1>Unsplash</h1>
        <div>
          <h4>
            The internet’s source of <a href="">freely-usable images.</a>.
          </h4>
          <p>Powered by creators everywhere.</p>
        </div>
        <my-search></my-search>
        <div>
          <span>Trending:</span>
          <ul >
            <li><a href="">flower</a></li>
            <li><a href="">flower</a></li>
            <li><a href="">flower</a></li>
            <li><a href="">flower</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="bom">
      <div>
        <a href="" style="cursor:zoom-in" title="aaaaaa">Photo of the Day &nbsp;</a> by
        <a href="">bantersnaps</a>
      </div>
      <div>
        Read more about the
        <a href="">Unsplash License</a>
      </div>
      <div>
        <img
          src="https://images.unsplash.com/file-1593474834382-661b072d9ec8image"
          alt=""
        />
        <a href="">Start your website with Squarespace today.</a>
      </div>
    </div>
  </div>
</template>

<script>
import mySearch from "@/components/my-index/my-search.vue";


export default {
  components: {
    mySearch,
  },
};

</script>

<style>
@import url("~@/assets/css/my-home.css");
@import url("~@/assets/css/common.css");
@media (max-width: 767px) {
  .my-home .top{
    padding: 70px 15px 80px 15px;
  }
  .my-home .top>div{
margin: 0px;
  }
  .my-home .top>div h1{font-size: 24px;}
  .my-home .top>div>.my-search {display: none;}
  .my-home .top>div>div:last-child {display: none;}
   .my-home .bom >div:nth-child(1){display: none;}
   .my-home .bom >div:nth-child(2){display: none;}
    .my-home .bom >div:nth-child(3){text-align: left;}
    .my-home .bom >div:nth-child(3)>img{left: 0px;}
}
@media (min-width: 768px) {
  .my-home .bom >div:nth-child(2){display: none;}
}
@media (min-width: 992px) {
  .my-home .bom >div:nth-child(2){display: inline-block;}
}

</style>